JavaScript Proxy API: Et dyptgående blikk på modifisering av objekters atferd

I det stadig utviklende landskapet av moderne JavaScript søker utviklere kontinuerlig etter kraftigere og mer elegante måter å administrere og samhandle med data på. Mens funksjoner som klasser, moduler og async/await har revolusjonert måten vi skriver kode på, er det en kraftig metaprogrammeringsfunksjon introdusert i ECMAScript 2015 (ES6) som ofte forblir underutnyttet: Proxy API.

Metaprogrammering kan høres skremmende ut, men det er rett og slett konseptet med å skrive kode som opererer på annen kode. Proxy API er JavaScripts primære verktøy for dette, og lar deg opprette en 'proxy' for et annet objekt, som kan avskjære og redefinere grunnleggende operasjoner for det objektet. Det er som å plassere en tilpassbar portvakt foran et objekt, noe som gir deg full kontroll over hvordan det aksesseres og modifiseres.

Denne omfattende guiden vil demystifisere Proxy API. Vi vil utforske kjernekonseptene, bryte ned de ulike funksjonene med praktiske eksempler, og diskutere avanserte brukstilfeller og ytelseshensyn. Ved slutten vil du forstå hvorfor Proxies er en hjørnestein i moderne rammeverk, og hvordan du kan utnytte dem til å skrive renere, kraftigere og mer vedlikeholdbar kode.

Forstå kjernekonseptene: Target, Handler og Traps

Proxy API er bygget på tre grunnleggende komponenter. Å forstå deres roller er nøkkelen til å mestre proxies.

• Target: Dette er det originale objektet du ønsker å pakke inn. Det kan være enhver type objekt, inkludert arrays, funksjoner eller til og med en annen proxy. Proxyen virtualiserer dette målobjektet, og alle operasjoner blir til syvende og sist (men ikke nødvendigvis) videresendt til det.
• Handler: Dette er et objekt som inneholder logikken for proxyen. Det er en plassholder-objekt hvis egenskaper er funksjoner, kjent som 'traps'. Når en operasjon skjer på proxyen, ser den etter en tilsvarende 'trap' i handleren.
• Traps: Dette er metodene på handleren som gir tilgang til egenskaper. Hver 'trap' tilsvarer en grunnleggende objekoperasjon. For eksempel avskjærer get-trappen lesing av egenskaper, og set-trappen avskjærer skriving til egenskaper. Hvis en 'trap' ikke er definert på handleren, blir operasjonen rett og slett videresendt til målobjektet som om proxyen ikke var der.

Syntaksen for å opprette en proxy er enkel:

const proxy = new Proxy(target, handler);

La oss se på et veldig grunnleggende eksempel. Vi vil opprette en proxy som rett og slett sender alle operasjoner til målobjektet ved å bruke en tom handler.

            
// Det originale objektet
const target = {
  message: "Hello, World!"
};

// En tom handler. Alle operasjoner vil bli videresendt til målet.
const handler = {};

// Proxy-objektet
const proxy = new Proxy(target, handler);

// Tilgang til en egenskap på proxyen
console.log(proxy.message); // Output: Hello, World!

// Operasjonen ble videresendt til målet
console.log(target.message); // Output: Hello, World!

// Endring av en egenskap gjennom proxyen
proxy.anotherMessage = "Hello, Proxy!";

console.log(proxy.anotherMessage); // Output: Hello, Proxy!
console.log(target.anotherMessage); // Output: Hello, Proxy!

            

              
                Copy
              
            
          

I dette eksemplet oppfører proxyen seg nøyaktig som det originale objektet. Den virkelige kraften kommer når vi begynner å definere 'traps' i handleren.

Anatomien til en Proxy: Utforske vanlige Traps

Handler-objektet kan inneholde opptil 13 forskjellige 'traps', som hver tilsvarer en grunnleggende intern metode for JavaScript-objekter. La oss utforske de vanligste og mest nyttige.

Traps for egenskapsaksess

1. get(target, property, receiver)

Dette er sannsynligvis den mest brukte 'trappen'. Den utløses når en egenskap på proxyen leses.

• target: Det originale objektet.
• property: Navnet på egenskapen som aksesseres.
• receiver: Selve proxyen, eller et objekt som arver fra den.

Eksempel: Standardverdier for ikke-eksisterende egenskaper.

            
const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

const userHandler = {
  get(target, property) {
    // Hvis egenskapen eksisterer på målet, returner den.
    // Ellers, returner en standardmelding.
    return property in target ? target[property] : `Property '${property}' does not exist.`;
  }
};

const userProxy = new Proxy(user, userHandler);

console.log(userProxy.firstName); // Output: John
console.log(userProxy.age);       // Output: 30
console.log(userProxy.country);   // Output: Property 'country' does not exist.

            

              
                Copy
              
            
          

2. set(target, property, value, receiver)

set-trappen kalles når en egenskap på proxyen tildeles en verdi. Den er perfekt for validering, logging eller oppretting av skrivebeskyttede objekter.

• value: Den nye verdien som tilordnes egenskapen.
• Trappen må returnere en boolean: true hvis tilordningen var vellykket, og false ellers (som vil kaste en TypeError i streng modus).

Eksempel: Datavalidering.

            
const person = {
  name: 'Jane Doe',
  age: 25
};

const validationHandler = {
  set(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number' || !Number.isInteger(value)) {
        throw new TypeError('Age must be an integer.');
      }
      if (value <= 0) {
        throw new RangeError('Age must be a positive number.');
      }
    }

    // Hvis valideringen består, sett verdien på målobjektet.
    target[property] = value;

    // Indiker suksess.
    return true;
  }
};

const personProxy = new Proxy(person, validationHandler);

personProxy.age = 30; // Dette er gyldig
console.log(personProxy.age); // Output: 30

try {
  personProxy.age = 'thirty'; // Kaster TypeError
} catch (e) {
  console.error(e.message); // Output: Age must be an integer.
}

try {
  personProxy.age = -5; // Kaster RangeError
} catch (e) {
  console.error(e.message); // Output: Age must be a positive number.
}

            

              
                Copy
              
            
          

3. has(target, property)

Denne 'trappen' avskjærer in-operatoren. Den lar deg kontrollere hvilke egenskaper som ser ut til å eksistere på et objekt.

Eksempel: Skjule 'private' egenskaper.

I JavaScript er en vanlig konvensjon å prefikse private egenskaper med en understrek (_). Vi kan bruke has-trappen til å skjule disse fra in-operatoren.

            
const secretData = {
  _apiKey: 'xyz123abc',
  publicKey: 'pub456def',
  id: 1
};

const hidingHandler = {
  has(target, property) {
    if (property.startsWith('_')) {
      return false; // Lat som om den ikke eksisterer
    }
    return property in target;
  }
};

const dataProxy = new Proxy(secretData, hidingHandler);

console.log('publicKey' in dataProxy); // Output: true
console.log('_apiKey' in dataProxy);   // Output: false (selv om den er på målet)
console.log('id' in dataProxy);        // Output: true

            

              
                Copy
              
            
          

Merk: Dette påvirker bare in-operatoren. Direkte tilgang som dataProxy._apiKey ville fortsatt fungere med mindre du også implementerer en tilsvarende get-trap.

4. deleteProperty(target, property)

Denne 'trappen' utføres når en egenskap slettes ved hjelp av delete-operatoren. Den er nyttig for å forhindre sletting av viktige egenskaper.

Trappen må returnere true for en vellykket sletting eller false for en mislykket.

Eksempel: Forhindre sletting av egenskaper.

            
const immutableConfig = {
  databaseUrl: 'prod.db.server',
  port: 8080
};

const deletionGuardHandler = {
  deleteProperty(target, property) {
    if (property in target) {
      console.warn(`Attempted to delete protected property: '${property}'. Operation denied.`);
      return false;
    }
    return true; // Egenskapen eksisterte uansett ikke
  }
};

const configProxy = new Proxy(immutableConfig, deletionGuardHandler);

delete configProxy.port;
// Konsollutskrift: Attempted to delete protected property: 'port'. Operation denied.

console.log(configProxy.port); // Output: 8080 (Den ble ikke slettet)

            

              
                Copy
              
            
          

Objekt-enumerering og beskrivelses-traps

5. ownKeys(target)

Denne 'trappen' utløses av operasjoner som henter listen over et objekts egne egenskaper, som Object.keys(), Object.getOwnPropertyNames(), Object.getOwnPropertySymbols(), og Reflect.ownKeys().

Eksempel: Filtrere nøkler.

La oss kombinere dette med vårt forrige 'private' egenskapseksempel for å skjule dem fullstendig.

            
const secretData = {
  _apiKey: 'xyz123abc',
  publicKey: 'pub456def',
  id: 1
};

const keyHidingHandler = {
  has(target, property) {
    return !property.startsWith('_') && property in target;
  },
  ownKeys(target) {
    return Reflect.ownKeys(target).filter(key => !key.startsWith('_'));
  },
  get(target, property, receiver) {
    // Forhindrer også direkte tilgang
    if (property.startsWith('_')) {
      return undefined;
    }
    return Reflect.get(target, property, receiver);
  }
};

const fullProxy = new Proxy(secretData, keyHidingHandler);

console.log(Object.keys(fullProxy)); // Output: ['publicKey', 'id']
console.log('publicKey' in fullProxy); // Output: true
console.log('_apiKey' in fullProxy);   // Output: false
console.log(fullProxy._apiKey);      // Output: undefined

            

              
                Copy
              
            
          

Merk at vi bruker Reflect her. Reflect-objektet gir metoder for avskjærbar JavaScript-operasjoner, og dets metoder har samme navn og signaturer som proxy-trapsene. Det er en beste praksis å bruke Reflect for å videresende den opprinnelige operasjonen til målet, og dermed sikre at standardoppførselen opprettholdes korrekt.

Traps for funksjoner og konstruktører

Proxies er ikke begrenset til vanlige objekter. Når målet er en funksjon, kan du avskjære kall og konstruksjoner.

6. apply(target, thisArg, argumentsList)

Denne 'trappen' kalles når en proxy av en funksjon blir utført. Den avskjærer funksjonskallet.

• target: Den originale funksjonen.
• thisArg: this-konteksten for kallet.
• argumentsList: Listen over argumenter som er sendt til funksjonen.

Eksempel: Logge funksjonskall og deres argumenter.

            
function sum(a, b) {
  return a + b;
}

const loggingHandler = {
  apply(target, thisArg, argumentsList) {
    console.log(`Calling function '${target.name}' with arguments: ${argumentsList}`);
    // Utfør den originale funksjonen med riktig kontekst og argumenter
    const result = Reflect.apply(target, thisArg, argumentsList);
    console.log(`Function '${target.name}' returned: ${result}`);
    return result;
  }
};

const proxiedSum = new Proxy(sum, loggingHandler);

proxiedSum(5, 10);
// Konsollutskrift:
// Calling function 'sum' with arguments: 5,10
// Function 'sum' returned: 15

            

              
                Copy
              
            
          

7. construct(target, argumentsList, newTarget)

Denne 'trappen' avskjærer bruken av new-operatoren på en proxy av en klasse eller funksjon.

Eksempel: Implementering av singleton-mønster.

            
class MyDatabaseConnection {
  constructor(url) {
    this.url = url;
    console.log(`Connecting to ${this.url}...`);
  }
}

let instance;

const singletonHandler = {
  construct(target, argumentsList) {
    if (!instance) {
      console.log('Creating new instance.');
      instance = Reflect.construct(target, argumentsList);
    }
    console.log('Returning existing instance.');
    return instance;
  }
};

const ProxiedConnection = new Proxy(MyDatabaseConnection, singletonHandler);

const conn1 = new ProxiedConnection('db://primary');
// Konsollutskrift:
// Creating new instance.
// Connecting to db://primary...
// Returning existing instance.

const conn2 = new ProxiedConnection('db://secondary'); // URL vil bli ignorert
// Konsollutskrift:
// Returning existing instance.

console.log(conn1 === conn2); // Output: true
console.log(conn1.url); // Output: db://primary
console.log(conn2.url); // Output: db://primary

            

              
                Copy
              
            
          

Praktiske brukstilfeller og avanserte mønstre

Nå som vi har dekket de individuelle 'traps', la oss se hvordan de kan kombineres for å løse virkelige problemer.

1. API-abstraksjon og datatransformasjon

API-er returnerer ofte data i et format som ikke samsvarer med applikasjonens konvensjoner (f.eks. snake_case vs. camelCase). En proxy kan håndtere denne konverteringen transparent.

            
function snakeToCamel(s) {
  return s.replace(/(_\w)/g, (m) => m[1].toUpperCase());
}

// Forestill deg at dette er våre rådata fra et API
const apiResponse = {
  user_id: 123,
  first_name: 'Alice',
  last_name: 'Wonderland',
  account_status: 'active'
};

const camelCaseHandler = {
  get(target, property) {
    const camelCaseProperty = snakeToCamel(property);
    // Sjekk om camelCase-versjonen eksisterer direkte
    if (camelCaseProperty in target) {
      return target[camelCaseProperty];
    }
    // Fallback til originalt egenskapsnavn
    if (property in target) {
      return target[property];
    }
    return undefined;
  }
};

const userModel = new Proxy(apiResponse, camelCaseHandler);

// Vi kan nå få tilgang til egenskaper ved hjelp av camelCase, selv om de er lagret som snake_case
console.log(userModel.userId);        // Output: 123
console.log(userModel.firstName);     // Output: Alice
console.log(userModel.accountStatus); // Output: active

            

              
                Copy
              
            
          

2. Observables og databinding (Kjernen i moderne rammeverk)

Proxies er motoren bak reaktivitetssystemene i moderne rammeverk som Vue 3. Når du endrer en egenskap på et proxied tilstandsobjekt, kan set-trappen brukes til å utløse oppdateringer i brukergrensesnittet eller andre deler av applikasjonen.

Her er et sterkt forenklet eksempel:

            
function createObservable(target, callback) {
  const handler = {
    set(obj, prop, value) {
      const result = Reflect.set(obj, prop, value);
      callback(prop, value); // Utløs tilbakekallet ved endring
      return result;
    }
  };
  return new Proxy(target, handler);
}

const state = {
  count: 0,
  message: 'Hello'
};

function render(prop, value) {
  console.log(`CHANGE DETECTED: The property '${prop}' was set to '${value}'. Re-rendering UI...`);
}

const observableState = createObservable(state, render);

observableState.count = 1;
// Konsollutskrift: CHANGE DETECTED: The property 'count' was set to '1'. Re-rendering UI...

observableState.message = 'Goodbye';
// Konsollutskrift: CHANGE DETECTED: The property 'message' was set to 'Goodbye'. Re-rendering UI...

            

              
                Copy
              
            
          

3. Negative array-indekser

Et klassisk og morsomt eksempel er å utvide native array-atferd for å støtte negative indekser, der -1 refererer til siste element, likt språk som Python.

            
function createNegativeArrayProxy(arr) {
  const handler = {
    get(target, property) {
      const index = Number(property);
      if (!Number.isNaN(index) && index < 0) {
        // Konverter negativ indeks til en positiv en fra slutten
        property = String(target.length + index);
      }
      return Reflect.get(target, property);
    }
  };
  return new Proxy(arr, handler);
}

const originalArray = ['a', 'b', 'c', 'd', 'e'];
const proxiedArray = createNegativeArrayProxy(originalArray);

console.log(proxiedArray[0]);  // Output: a
console.log(proxiedArray[-1]); // Output: e
console.log(proxiedArray[-2]); // Output: d
console.log(proxiedArray.length); // Output: 5

            

              
                Copy
              
            
          

Ytelseshensyn og beste praksis

Selv om proxies er utrolig kraftige, er de ikke en magisk løsning. Det er avgjørende å forstå deres implikasjoner.

Ytelsesoverhode

En proxy introduserer et lag med indireksjon. Hver operasjon på et proxied objekt må passere gjennom handleren, noe som legger til en liten mengde overhode sammenlignet med en direkte operasjon på et vanlig objekt. For de fleste applikasjoner (som datavalidering eller reaktivitet på rammeverksnivå) er dette overhodet ubetydelig. Imidlertid, i ytelseskritisk kode, som en stram loop som behandler millioner av elementer, kan dette bli en flaskehals. Benchmark alltid hvis ytelse er en primær bekymring.

Proxy-invarianter

En 'trap' kan ikke lyve helt om målobjektets natur. JavaScript håndhever et sett med regler kalt 'invarianter' som proxy-traps må følge. Brudd på en invariant vil føre til en TypeError.

For eksempel er en invariant for deleteProperty-trappen at den ikke kan returnere true (som indikerer suksess) hvis den tilsvarende egenskapen på målobjektet er ikke-konfigurerbar. Dette forhindrer at proxyen hevder at den har slettet en egenskap som ikke kan slettes.

            
const target = {};
Object.defineProperty(target, 'unbreakable', { value: 10, configurable: false });

const handler = {
  deleteProperty(target, prop) {
    // Dette vil bryte invarianten
    return true;
  }
};

const proxy = new Proxy(target, handler);

try {
  delete proxy.unbreakable; // Dette vil kaste en feil
} catch (e) {
  console.error(e.message);
  // Output: 'deleteProperty' on proxy: returned true for non-configurable property 'unbreakable'
}

            

              
                Copy
              
            
          

Når skal man bruke Proxies (og når ikke)

• Bra for: Bygging av rammeverk og biblioteker (f.eks. tilstandshåndtering, ORM-er), feilsøking og logging, implementering av robuste valideringssystemer, og oppretting av kraftige API-er som abstraherer underliggende datastrukturer.
• Vurder alternativer for: Ytelseskritiske algoritmer, enkle objektutvidelser der en klasse eller en fabrikkfunksjon ville vært tilstrekkelig, eller når du trenger å støtte veldig gamle nettlesere som ikke har ES6-støtte.

Revocable Proxies

For scenarier der du kanskje trenger å 'slå av' en proxy (f.eks. av sikkerhetsårsaker eller minnehåndtering), tilbyr JavaScript Proxy.revocable(). Den returnerer et objekt som inneholder både proxyen og en revoke-funksjon.

            
const target = { data: 'sensitive' };
const handler = {};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.data); // Output: sensitive

// Nå, vi trekker tilbake proxyens tilgang
revoke();

try {
  console.log(proxy.data); // Dette vil kaste en feil
} catch (e) {
  console.error(e.message);
  // Output: Cannot perform 'get' on a proxy that has been revoked
}

            

              
                Copy
              
            
          

Proxies vs. andre Metaprogrammeringsteknikker

Før Proxies brukte utviklere andre metoder for å oppnå lignende mål. Det er nyttig å forstå hvordan Proxies sammenlignes.

Object.defineProperty()

Object.defineProperty() modifiserer et objekt direkte ved å definere getters og setters for spesifikke egenskaper. Proxies, derimot, modifiserer ikke det originale objektet i det hele tatt; de pakker det inn.

• Omfang: defineProperty fungerer på en per-egenskap basis. Du må definere en getter/setter for hver egenskap du vil overvåke. En Proxys get og set traps er globale, og fanger operasjoner på enhver egenskap, inkludert nye som legges til senere.
• Funksjoner: Proxies kan avskjære et bredere spekter av operasjoner, som deleteProperty, in-operatoren, og funksjonskall, som `defineProperty` ikke kan.

Konklusjon: Kraften i virtualisering

JavaScript Proxy API er mer enn bare en smart funksjon; det er et fundamentalt skifte i hvordan vi kan designe og samhandle med objekter. Ved å la oss avskjære og tilpasse grunnleggende operasjoner, åpner Proxies døren til en verden av kraftige mønstre: fra sømløs datavalidering og transformasjon til de reaktive systemene som driver moderne brukergrensesnitt.

Selv om de kommer med en liten ytelseskostnad og et sett med regler å følge, er deres evne til å skape rene, frakoblede og kraftige abstraksjoner uovertruffen. Ved å virtualisere objekter kan du bygge systemer som er mer robuste, vedlikeholdbare og uttrykksfulle. Neste gang du står overfor en kompleks utfordring som involverer datahåndtering, validering eller observabilitet, bør du vurdere om en Proxy er det riktige verktøyet for jobben. Det kan bare være den mest elegante løsningen i verktøysettet ditt.